<template>
	<div class="report-list mt-2 rounded bg-bg-3 overflow-hidden">
		<div class="report-list__header cursor-pointer" @click="toggleOpen">
			<div class="top">
				<div class="left">
					<div class="text-base">
						{{ title }}
					</div>
					<div v-if="slotsText" class="slots">
						<div class="slots-text">{{ slotsText }}</div>
						<div class="slots-spins">{{ $t('report.spins') }}{{ slotsCount }}</div>
					</div>
					<up-amount class="total" :value="totalAmount" />
				</div>
				<div class="right">
					<div class="label">{{ $t('report.balance') }}</div>
					<div class="balance"><up-amount :value="data.balanceAfter" /></div>
				</div>
			</div>
			<div class="bottom">
				<div class="time">{{ $t('report.time') + ': ' }}{{ fmtDateTimeGMT(data.createdAt) }}</div>
				<base-icon class="open-icon" :class="{ open }" name="down1"></base-icon>
			</div>
		</div>
		<div class="report-list__body">
			<report-info v-for="item in data.subList" :key="item" :data="item" compact />
		</div>
		<div class="report-list__footer"></div>
	</div>
</template>

<script setup lang="ts">
import { BaseIcon } from '@/components/base'
import { UpAmount } from '@/components/up'
import { ref, computed, PropType } from 'vue'
import ReportInfo from './report-info.vue'
import { t, fmtDateTimeGMT } from '@/utils'
import { ReportType } from '@/types'

const porps = defineProps({
	data: {
		type: Object as PropType<ReportType>,
		required: true
	}
})

const open = ref(false)

const toggleOpen = () => {
	open.value = !open.value
}

const totalAmount = computed(() =>
	porps.data.subList.reduce((prev, curr) => prev + +curr.amount, 0)
)

const title = computed(() => {
	if (porps.data?.bizType === 'slots' && porps.data?.sessionId) {
		return t('transactionType.' + porps.data.subTitleValue)
	} else {
		return t('transactionType.' + porps.data.mainTitleEnum)
	}
})

const slotsText = computed(() => {
	let res = ''
	if (porps.data?.bizType === 'slots') {
		const games = Array.from(new Set(porps.data.subList.map(({ subExtData }) => subExtData)))
		if (games.length > 1) {
			res = t('report.games', [games.length])
		} else {
			res = porps.data.subExtData
		}
	}
	return res
})

const slotsCount = computed(() => {
	if (porps.data?.bizType === 'slots' && porps.data?.sessionId) {
		return porps.data.subList.filter(({ mainTitleEnum }) => mainTitleEnum === 'bet').length
	} else {
		return ''
	}
})

const bodyHeight = computed(() => (open.value ? '257px' : '0'))
const bodyOverflow = computed(() => (open.value ? 'scroll' : 'hidden'))
</script>
<style lang="scss" scoped>
@use '@/styles/mixins.scss' as *;
.report-list {
	&__header {
		padding: 8px 8px 2px;
		font-size: 12px;
		line-height: 16px;
		.top,
		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.bottom {
			margin-top: 5px;
		}
		.left {
			flex: 1;
			width: 1px;
			@include font-bold();
			.total {
				font-size: 14px;
			}
			.slots {
				padding-right: 4px;
				margin-bottom: 2px;
				display: flex;
				color: var(--color-text-2);
				&-text {
					max-width: 160px;
					@include ellipsis();
				}
				&-spins {
					margin-left: 8px;
					text-align: left;
				}
			}
		}
		.right {
			text-align: right;
			font-size: 12px;
			.label {
				color: var(--color-text-3);
			}
		}
		.time {
			color: var(--color-text-3);
		}
		.open-icon {
			transition: transform 0.3s;
			&.open {
				transform: rotate(180deg);
			}
		}
	}
	&__body {
		background-color: var(--color-bg-4);
		max-height: v-bind(bodyHeight);
		overflow: v-bind(bodyOverflow);
		overflow-x: hidden;
		transition: max-height 0.3s;
		.report-info::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 5px;
			right: 5px;
			height: 1px;
			background-color: var(--color-border-3);
		}
	}
	&__footer {
		height: 12px;
		background-color: var(--color-bg-4);
	}
}
</style>
